import { Button, Flex } from 'esy-ui';
import { observer } from 'mobx-react-lite';
import depositPng from '@/assets/images/common/deposit.png';
import withdrawalPng from '@/assets/images/common/withdrawal.png';
import betRecordPng from '@/assets/images/common/bet_record.png';
import { useFormatText, useNavigation } from '@/hooks';
import { BgImg, Img } from '@/components';
import test1Png from '@/assets/images/black/test-1.png';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { getTimeDesc } from '@/utils';

const list = [
  { cols: 1, url: depositPng, text: 'text_4', key: '/deposit' },
  { cols: 1, url: withdrawalPng, text: 'text_5', key: '/withdraw' },
  { cols: 1, url: betRecordPng, text: 'text_6', key: '/bet/record' },
];

function CardInfo() {
  const { text } = useFormatText();
  const navigation = useNavigation();
  const { userInfo, balance } = useUserInfoStore();
  const { OfficialWebsiteUrl } = useGlobalStore();

  // 路由跳转
  const toPage = (key: string) => () => {
    navigation(key);
  };

  const renderChildren = ({ text: t, url, key }) => (
    <div className='flex items-center' onClick={toPage(key)}>
      <Img boxClassName='w-6 h-6' src={url} />
      <div className='text-sm ml-1'>{text(t)}</div>
    </div>
  );

  const toLink = () => {
    navigation(OfficialWebsiteUrl);
  };

  return (
    <>
      <div className='rounded-t bg-menu h-6 text-xs flex items-center justify-between overflow-hidden'>
        <div className='px-3'>
          {text(getTimeDesc('text_1', 'text_14', 'text_15'))}
          {userInfo?.Token ? userInfo?.NickName : text('text_11')}
        </div>
        <BgImg className='bg-cover pl-3 pr-3 h-full flex items-center' url={test1Png} onClick={toLink}>
          {OfficialWebsiteUrl}
        </BgImg>
      </div>
      <div className='rounded-b border border-desc bg-head'>
        {!userInfo?.Token ? (
          <div className='p-3 flex items-center'>
            <div className='text-white text-lg font-bold mr-2'>{text('text_2')}</div>
            <Button className='rounded-full' type='ghost' size='small' onClick={toPage('/login')}>
              {text('text_3')}
            </Button>
          </div>
        ) : (
          <div className='p-2 flex items-center justify-between'>
            <div className='text-base text-white'>
              <span className='font-bold pl-2'>
                {/* BB */}
                {text('text_13')}
              </span>
              ￥{balance}
            </div>
            <div className='bg-primary rounded-md text-xs p-px text-center font-bold' onClick={toPage('/activity')}>
              <div className='rounded-t-md py-0.5 text-primary px-3 bg-head'>{text('text_16')}</div>
              <div>￥&nbsp; 0.00</div>
            </div>
          </div>
        )}

        <Flex className='border-t border-bdr py-0.5' rowShare={3} list={list} renderChildren={renderChildren} />
      </div>
    </>
  );
}

export default observer(CardInfo);
